import router from './router'
// 引入进度条组件
import NProgress from 'nprogress'
// 引入进度条组件样式
import 'nprogress/nprogress.css'
import store from '@/store'
import getPageTitle from '@/utils/get-page-title'
// 进度条最右侧不出现加载的小圆圈
NProgress.configure({ showSpinner: false })
const whiteList = ['/login', '/404']

// 导入动态路由表
import { asyncRoutes } from '@/router/index'

// 路由前置守卫
// 路由守卫概念：守卫路由跳转的一个函数
// 全局前置路由守卫：任意路由跳转会先执行一个守卫函数，决定是放行还是中断跳转
// 作用：可以再跳转页面之前 执行函数判断是允许跳转还是拦截
// 场景：在登录/未登录状态，判断是否可以访问页面
router.beforeEach(async (to, from, next) => {
  NProgress.start()
  const token = store.getters.token
  /*   if (token && to.path === '/login') {
    next('/')
    NProgress.done()
  } else if (token) {
    next()
  } else if (whiteList.includes(to.path)) {
    next()
  } else {
    next('/login')  //   NProgress.done()
  } */
  if (token) {
    if (to.path === '/login') {
      next('/') // 中断本来要跳转到登录页面的导航, 强制跳转到'/', 会让浏览器地址栏的路由地址改变, 重新去匹配路由规则数组, 匹配后再次重新执行路由守卫(直到走了next()才放行跳转页面)
      NProgress.done() // 因为中断了本次跳转, 所以后置守卫不走, 没人关闭本次进度条
    } else {
      next()
      if (!store.getters.name) {
        // 调用user模块下获取用户信息的actions, 有值保存到vuex中结果，

        // 如果需要在此模块接收到actions的需要在actions里return 出来结果
        // 1 准备俩份数据 一份动态路由表[前端本地存放] + 个人信息接口提供
        const res = await store.dispatch('user/getUserInfoActions')
        // console.log(res.roles.menus)
        // console.log(asyncRoutes)
        // 2 以menus为主对asyncRoutes做过滤 过滤filter + 条件：判断当前route下面的chilren[0].name能不能在menus找到
        const menus = res.roles.menus
        const newArr = asyncRoutes.filter(item => menus.includes(item.children[0].name))
        // console.log(newArr)
        // 3调用一个addRoues的方法 把筛选之后的动态路由表加入到路由系统中 让路由可用
        // 问题：刷新的时候404
        // 原因：路由系统有一个要求 404兜底路由 要求放到整个路由数组的最后 如果放到中间会先被404拦截到
        // 之前的结构 [静态路由 + 404 + 动态路由] -> [静态路由 + 动态路由 + 404]
        router.addRoutes([...newArr, { path: '*', redirect: '/404', hidden: true }])
        // 4. 调用store中mutation函数 完成左侧路由的拼接
        store.commit('menu/SET_ROUTERLIST', newArr)
      }
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      NProgress.done()
    }
  }
})

// 后置守卫
router.afterEach((to) => {
  // console.log(getPageTitle)
  document.title = getPageTitle(to.meta.title)
  // 关闭进度条
  NProgress.done()
})
